<template>
	<view class="employment mg-30 ">
		<view class="title mg-tb-20">就业栏</view>
		<view class="employmentList mg-tb-30 df-cen" v-for="(item,index) in list" :key="item.id"
			@click="showDateils(item.id)">
			<view class="left">
				<image class="bor-10" :src="item.image"></image>
			</view>
			<view class="right df-tb-cen ">
				<view class="rightTitle one-ellipsis ">{{item.title}}</view>
				<view class="name">
					{{item.name}}
				</view>
				<text class="tag">{{item.salary}}</text>
				<view class="rightTime df-sb ">
					<view class="time">{{item.releaseTime}}</view>
					<view class="btn bor-50">查看详情</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getJob
	} from '/api/common.js';

	import {
		ref
	} from 'vue'

	const list = ref([])

	function showDateils(id) {
		uni.navigateTo({
			url: "/page_employment/employmentDetails?id=" + id
		})
	}

	//就业
	async function getJobList(type) {
		let res = await getJob()
		list.value = res.data.data
	}
	getJobList()
</script>


<style lang="scss" scoped>
	.employment {
		.title {
			font-weight: 550;
		}

		.employmentList {
			.left {
				width: 200rpx;
				height: 200rpx;

				image {
					width: 200rpx;
					height: 200rpx;
				}
			}

			.right {
				// margin-left: 20rpx;
				// background: red;
				width: 400rpx;
				box-sizing: border-box;
				padding: 10rpx 20rpx;

				.rightTitle {
					font-weight: 700;
	
				}

				.name {
					padding: 4rpx 0;
					text-overflow: ellipsis;
					overflow: hidden;
					word-break: break-all;
					white-space: nowrap;
				}

				.tag {
					width: 76rpx;
					height: 30rpx;
					font-size: 26rpx;
					line-height: 30rpx;
					text-align: center;
					border-radius: 10rpx;
					color: #fff;
					background: #23a8f2;
				}

				.rightTime {
					.time {
						color: #b6b6b6;
					}

					.btn {
						margin-left: 20rpx;
						font-size: 25rpx;
						padding: 10rpx 20rpx;
					}
				}
			}
		}
	}
</style>